<div>
  {{ $pinnedNum := 0 }}

  {{ range .Pages }}
    {{ $pinnedNum = add $pinnedNum (len (where .Pages "Params.pinned" true)) }}
  {{ end }}

  {{ if gt $pinnedNum 0 }}
    <div style="display: flex; justify-content: center">
    <ol class="showcase__box--wrapper" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
      {{ range .Pages }}
        {{ $category := .Params.category }}
        {{ $categoryIcon := (print "svgs/showcase/" (.Params.categoryIcon | default "code") ".svg") }}
        {{ range where .Pages "Params.pinned" true }}
          <li class="showcase__box" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
            <a href="{{ .Params.Link }}" class="showcase__box--link" target="_blank" rel="noreferrer"></a>
            <span class="showcase__box--title">
              {{ .Title }}
            </span>
            <div class="showcase__box--desc">
              {{ .Description | markdownify }}
            </div>
            <div class="grow"></div>
            <div class="showcase__box--meta">
              <span class="type">
                {{ partial $categoryIcon (dict "width" 14 "height" 14) }}
                {{ $category }}
              </span>
              <div class="grow"></div>
              {{ range .Params.links }}
                {{ $icon := (print "svgs/showcase/" (.icon | default "code") ".svg") }}
                <a href="{{ .link }}" class="type" target="_blank" rel="noreferrer">
                  {{ partial $icon (dict "width" 14 "height" 14) }}
                  {{ .name }}
                </a>
              {{ end }}
              {{ with .Params.repo }}
                <a href="{{ . }}" class="type" target="_blank" rel="noreferrer">
                  {{ partial "svgs/social/github.svg" (dict "width" 14 "height" 14) }}
                  Repository
                </a>
              {{ end }}
            </div>
            {{ with .Params.shields }}
              <div class="showcase__box--shields">
                {{ range . }}
                  <a href="{{ .link }}" class="type" target="_blank" rel="noreferrer">
                    <img src="{{ .image }}" alt="{{ .name }}">
                  </a>
                {{ end }}
              </div>
            {{ end }}
          </li>
        {{ end }}
      {{ end }}
    </ol>
    </div>
  {{ end }}
</div>